<style>
.image {
  width: 100%;
  display: block;
}
.col_4 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.member-chart {
  margin-top: 20px;
  margin-bottom: 20px;
}
.attendance {
  display: flex;
}
.attDate {
  display: flex;
  margin-left: 10%;
  width: 300px;
}
.dd-dataCenter-heading {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  padding-top: 5px;
  padding-left: 5px;
  font-weight: bold;
}
.padding-top20 {
  padding-top: 20px;
}
.dd-dataCenter-panel {
  max-width: 260px;
  width: 100%;
  height: 180px;
  border-radius: 4px;
  border: 1px solid #dfdfdf;
  box-shadow: 0;
  background: #fff;
  float: left;
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 8px;
}
.dd-dataCenter-panel-hd {
  background: #cac9c9;
  color: #333;
  border-bottom: 1px solid #e8e8e8;
  font-size: 14px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 16px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 15px;
  line-height: 1;
  text-align: center;
}
.dd-person-status {
  width: auto;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  padding: 0 35px;
}
.pull-right {
  padding: 5px 5px;
  float: right;
  font-size: 16px;
}
</style>

<template>
  <basic-container>
    <el-container>
      <el-main id="el-main">
        <div class="col-sm-12 member-chart ng-isolate-scope el-card box-card is-always-shadow" style="padding:10px 5px;">
          <h4 class="dd-dataCenter-heading ng-binding" data-spm-anchor-id="0.0.0.i3.4bad77a3uZsHDb">精准营销
            <span class="text-muted ng-binding" data-spm-anchor-id="0.0.0.i4.4bad77a3uZsHDb"></span>
          </h4>
          <div class="col-sm-12">
            <div class="col-sm-12 member-chart ng-scope el-card box-card" style="padding:10px 15px 0 15px">
              <el-form :inline="true" :model="filters" size="small" ref="filters" class="searchForm">
                <el-form-item class="el-form-item" label="存款日均" prop="name">
                  <el-input type="text" prefixIcon='el-icon-tickets' style="width:87px"></el-input>
                  ~
                  <el-input type="text" prefixIcon='el-icon-tickets' style="width:84px"></el-input>
                </el-form-item>
                <el-form-item class="el-form-item" label="理财日均" prop="lc">
                  <el-input type="text" prefixIcon='el-icon-tickets' style="width:84px"></el-input>
                  ~
                  <el-input type="text" prefixIcon='el-icon-tickets' style="width:85px"></el-input>
                </el-form-item>
                <el-form-item class="el-form-item" label="贷款日均" prop="dk">
                  <el-input type="text" prefixIcon='el-icon-tickets' style="width:84px"></el-input>
                  ~
                  <el-input type="text" prefixIcon='el-icon-tickets' style="width:85px"></el-input>
                </el-form-item>

                <el-form-item class="el-form-item" label="手机银行开户" prop="name">
                  <el-radio v-model="radio" label="1">是</el-radio>
                  <el-radio v-model="radio" label="2">否</el-radio>
                </el-form-item>
                <el-form-item class="el-form-item" label="积分范围" prop="dk">
                  <el-input type="text" prefixIcon='el-icon-tickets' style="width:84px"></el-input>
                  ~
                  <el-input type="text" prefixIcon='el-icon-tickets' style="width:85px"></el-input>
                </el-form-item>
                <el-form-item class="el-form-item" label="最高学历" prop="name">
                  <el-select size="small" v-model="filters.insurrance" clearable placeholder="请选择" width="160px">
                    <el-option label="研究生及以上" value='0'></el-option>
                    <el-option label="本科" value='1'></el-option>
                    <el-option label="专科" value='2'></el-option>
                    <el-option label="高中及以下" value='3'></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="年龄区间">
                  <el-select size="small" v-model="filters.age" clearable placeholder="请选择" width="100px">
                    <el-option label="20岁以下" value='4'></el-option>
                    <el-option label="20-30岁" value='3'></el-option>
                    <el-option label="30-40岁" value='2'></el-option>
                    <el-option label="40岁往上" value='1'></el-option>
                  </el-select>
                </el-form-item>
                <!-- <el-form-item label="工作年限">
                  <el-select size="small" v-model="filters.area" clearable placeholder="请选择" style="width:100px">
                    <el-option label="1年以下" value='0'></el-option>
                    <el-option label="1-3年" value='1'></el-option>
                    <el-option label="3-5年" value='2'></el-option>
                    <el-option label="5-10年" value='3'></el-option>
                    <el-option label="10年以上" value='4'></el-option>
                  </el-select>
                </el-form-item> -->
                <el-form-item label="职位">
                  <el-select size="small" v-model="filters.area" clearable placeholder="请选择" style="width:100px">
                    <el-option label=" 高层领导" value='0'></el-option>
                    <el-option label="中层领导" value='1'></el-option>
                    <el-option label="一般员工" value='2'></el-option>
                    <el-option label="其他" value='3'></el-option>
                  </el-select>
                </el-form-item>

                <span class="bth_search">
                  <el-form-item>
                    <el-button type="success" icon="el-icon-search" v-on:click="getDataGrid(true)">查询</el-button>
                  </el-form-item>
                  <el-form-item>
                    <el-button icon="el-icon-refresh" @click="resetSearchForm( 'filters')">重置</el-button>
                  </el-form-item>
                </span>
              </el-form>
            </div>
            <el-row id="toolbar_unit">
              <el-col :span="24">
                <div class="grid-content bg-purple-light">
                  <el-button type="success" size="mini" @click="handleFanancing" icon="el-icon-upload" :disabled="this.sels.length===0">推送理财产品</el-button>
                  <el-button type="primary" size="mini" @click="handleLoan" :disabled="this.sels.length===0" icon="el-icon-upload">推送贷款产品
                  </el-button>
                </div>
              </el-col>
            </el-row>

            <el-table :data="gridDatas" id="dataGrid" empty-text="当前企业没有该员工信息" border stripe size="mini" @selection-change="selsChange" style="width: 100%;" height="280px">
              <el-table-column type="selection" width="45"></el-table-column>
              <el-table-column header-align="center" align="center" prop="index" :formatter="index_formatter" label="序号" width="60px"></el-table-column>
              <el-table-column header-align="center" align="center" prop="username" label="职工姓名" show-overflow-tooltip></el-table-column>
              <!-- <el-table-column header-align="center" align="center" prop="idCard" label="联系方式" show-overflow-tooltip></el-table-column> -->
              <el-table-column header-align="center" align="center" prop="phone" label="联系方式" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="area" label="最高学历" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="houseType" label="职位" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="jf" label="员工积分" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="ck" label="存款金额(万元)" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="dk" label="贷款金额(万元)" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="lc" label="理财金额(万元)" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="exception" label="异常信息" show-overflow-tooltip></el-table-column>

            </el-table>
          </div>
        </div>
      </el-main>

    </el-container>
  </basic-container>
</template>
<script>
import { getToken, setToken, removeToken, getFileIp } from '@/util/auth'
import request from '@/router/axios'
import deptTree from '../report/deptTree.vue'
export default {
  name: 'repairRegister',
  components: {
    deptTree
  },
  data() {
    return {
      radio: '1',
      title: '',
      statusOptions: [],
      communityOptions: [],
      buildingOptions: [],
      unitOptions: [],
      sels: [], // 列表选中列
      houseOptions: [],
      addForm: [],
      addFormVisible: false,
      //单元过滤条件
      filters: {
        area: '',
        status: '',
        insurrance: ''
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      gridDatas: [
        {
          index: 1,
          username: '赵湖',
          idCard: '370481199306031534',
          area: '本科',
          houseType: '一般员工',
          familyCount: '5',
          marriage: '已婚',
          residence: '2018-02-28',
          property: '正常',
          phone: 18369656586,
          ck: 1,
          dk: 0,
          lc: 0,
          jf: 36,
          exception: '无'
        },
        {
          index: 1,
          username: '刘思思',
          idCard: '370481199306031533',
          area: '专科',
          houseType: '中层领导',
          familyCount: '5',
          marriage: '已婚',
          residence: '2017-01-03',
          property: '偶尔欠费',
          phone: 18369656586,
          ck: 13,
          dk: 0,
          lc: 0,
          jf: 553,
          exception: '无'
        },
        {
          index: 1,
          username: '张日忠',
          idCard: '370481196506031533',
          area: '硕士研究生',
          houseType: '高层领导',
          familyCount: '3',
          marriage: '已婚',
          residence: '2017-03-06',
          property: '偶尔欠费',
          phone: 18369656586,
          ck: 1,
          dk: 23,
          lc: 1.3,
          jf: 69,
          exception: '无'
        }
      ],
      suggestTypeOptions: [],
      sort: {
        sort: 'sort',
        order: 'asc'
      },
      total: 0,
      page: 1,
      pageSize: 10,
      listLoading: false,
      sels: [],
      addFormRules: {
        liftUser: [
          {
            required: true,
            message: '请选择业主 '
          }
        ],
        description: [
          {
            required: true,
            message: '请填写问题描述 '
          }
        ]
      }
    }
  },
  methods: {
    selsChange: function(sels) {
      this.sels = sels
    },
    index_formatter: function(row, column, cellValue, index) {
      //放回索引值
      return this.pageSize * (this.page - 1) + 1 + index
    },
    resetSearchForm() {
      this.filters.status = ''
      this.filters.area = ''
      this.filters.age = ''
    },
    getDataGrid() {
      if (this.filters.name == '刘宇') {
        this.gridDatas = this.liuyu
      } else if (this.filters.name == '赵湖') {
        this.gridDatas = this.zhangsan
      } else {
        this.gridDatas = this.gridDatas
      }
    },
    treeNodeClick(data, node) {
      if (data.leaf == true) {
        this.drawLine()
      }
    },
    handleFanancing() {
      this.addFormVisible = true
      this.title = '理财产品简介'
    },
    handleLoan() {
      this.addFormVisible = true
      this.title = '贷款产品简介'
    },
    addSubmit() {
      this.addFormVisible = false
      this.$message({
        message: '推送成功',
        type: 'success',
        duration: 2000
      })
    }
  },
  mounted() {}
}
</script>
